*{
    margin: 0;
    padding: 0;
    list-style: none;
}
body{
    background-color: #100C2A;
    color: #fff;
}
.main {
    align-content:1 center;
    margin: 0.625rem auto 3.125rem;
    height: 37.5rem;
}

h3 {
    position: absolute;
    top: 0;
    left:8%;
    color: #fff !important;
}
img{
    width: 3.125rem;
    filter: invert(66%) sepia(53%) saturate(3284%) hue-rotate(184deg) brightness(79%) contrast(82%);
}
ul li{
    position: relative;
}

/* 整体布局 */
.container{
    width: 100%;
}
.carousel{
    width: 100%;
    height: 41.875rem;
    margin: 3.125rem auto 0;
    /* background-color: #333; */
    position: relative;
    overflow: hidden;/* 作用：1）清除浮动 2）超出部分隐藏 */
}
/* 组图 */
.carousel .imgs{
    width: 400%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex
}
.carousel .imgs li{
    flex:1;
}

/* 控制器 */
.carousel .prev,.carousel .next{
    width: 2.8125rem;
    height: 2.8125rem;
    position: absolute;
    top: 11.0625rem;
    z-index:10;
    cursor: pointer;
}
.carousel .prev:hover,.carousel .next:hover{
    filter: invert(64%) sepia(71%) saturate(315%) hue-rotate(121deg) brightness(91%) contrast(92%);
}
.carousel .prev{
    left: 3.125rem;
}
.carousel .next{
    right: 3.125rem;
    /* background-color: #fff; */
}
/* 计数器 */
.carousel .count{
    width: 100%;
    height: 0.9375rem;
    position: absolute;
    bottom: 0.9375rem;
    z-index: 10;
}
.carousel .count ul{
    width: 15.625rem;
    margin: 0 auto;
}
.carousel .count ul li{
    width: 0.9375rem;
    height: 0.9375rem;
    margin: 0 0.1875rem;
    border-radius: 50%;
    background-color: #fff;
    opacity: .8;
    filter:alpha(opacity=80);
    float: left;
    cursor: pointer;
    z-index: 20;
    color: rgb(74, 197, 177);
    font-size: 0.75rem;
    text-align: center;
    padding: 0.3125rem;
}
.carousel .count ul li.active{
    background-color: rgb(27, 119, 161);
    color: #fff;
}